<template>
  <!-- 設置顏色 -->
  <van-popup v-model="changColor" position="bottom" class="color-panel">
    <div class="color-items">
      <span
        class="color-item"
        v-for="(item, $index) in colors"
        :key="$index"
        @click="chooseColor(item)"
      >
        <span class="color-cycle" :class="'bg-color' + ($index + 1)"></span>
      </span>
    </div>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      changColor: false,
      // colors: ['#f04134', '#00a854', '#108ee9', '#f5317f', '#f56a00', '#7265e6', '#ffbf00', '#00a2ae', '#2e3238']
      colors: [
        { color: '#007eff', theme: 'theme-one' },
        { color: '#652BF5', theme: 'theme-two' },
        { color: '#f56a00', theme: 'theme-three' }
      ]
    }
  },
  mounted() {
  },
  methods: {
    // 假装调用接口设置颜色
    chooseColor(item) {
      // this.$bus.$emit('set-theme', color)
      this.changColor = false
      localStorage.setItem('themeColor', item.color)
      window.document.documentElement.setAttribute('data-theme', item.theme)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss">
@import "~@/assets/mixin.scss";
.color-panel {
  width: 100%;
  padding: rem(20);
  .color-items {
    display: inline-block;
    width: 100%;
  }

  .color-item {
    display: inline-block;
    width: 20%;
    text-align: center;
    margin: rem(20) 0;
    .color-cycle {
      display: inline-block;
      width: rem(60);
      height: rem(60);
      border-radius: 50%;
      box-shadow: rem(2) rem(2) rem(5) #666;
    }
  }
  @for $i from 1 to 4 {
    .bg-color#{$i} {
      background-color: nth($colors, $i);
    }
  }
}
</style>
